<template>
    <!-- pages/taskDetail/taskDetail.wxml -->
    <view class="container">
        <view class="lists">
            <view class="item">
                <view
                    :class="
                        info.status == 1
                            ? 'tag blue2'
                            : info.status == 2
                            ? 'tag blue2'
                            : info.status == 3
                            ? 'tag green'
                            : info.status == 4
                            ? 'tag gray'
                            : info.status == 5
                            ? 'tag yellow'
                            : info.status == 6
                            ? 'tag blue'
                            : 'tag red'
                    "
                >
                    {{
                        info.status == 1
                            ? '已接单'
                            : info.status == 2
                            ? '已开始'
                            : info.status == 3
                            ? '已完成'
                            : info.status == 4
                            ? '已取消'
                            : info.status == 5
                            ? '被驳回'
                            : info.status == 6
                            ? '已结算'
                            : '待接单'
                    }}
                </view>
                <view class="info">
                    <label>订单编号：</label>
                    <text>{{ info.orderNo }}</text>
                </view>
                <view class="info">
                    <label>门店名称：</label>
                    <text>{{ info.storeName }}</text>
                </view>
                <view class="info">
                    <label>房间名称：</label>
                    <text>{{ info.roomName }}</text>
                </view>
                <view class="info">
                    <label>预计时间：</label>
                    <text v-if="info.orderEndTime">{{ info.orderEndTime }}</text>
                </view>
                <view class="info">
                    <label>完成人员：</label>
                    <text v-if="info.userName">{{ info.userName }}</text>
                </view>
                <view class="info">
                    <label>接单时间：</label>
                    <text v-if="info.createTime">{{ info.createTime }}</text>
                </view>
                <view class="info">
                    <label>完成时间：</label>
                    <text v-if="info.finishTime">{{ info.finishTime }}</text>
                </view>
                <view class="info">
                    <label>结算时间：</label>
                    <text v-if="info.settlementTime">{{ info.settlementTime }}</text>
                </view>
            </view>
        </view>
        <!-- 图片上传 -->
        <view class="imgs">
            <view class="title border-primary">图片上传</view>
            <view class="box">
                <van-uploader :file-list="fileList" @after-read="afterRead" @delete="deleteFun" preview-size="210rpx" />
            </view>
        </view>
        <!-- 驳回原因 -->
        <!-- 管理员端 -->
        <view class="result" v-if="(userinfo.userType === 12 || userinfo.userType === 13) && info.status === 3">
            <view class="color-attention">备注：</view>
            <view>
                <textarea v-model="complaintDesc" placeholder="请输入" />
            </view>
        </view>
        <!-- 保洁端 -->
        <view class="result" v-if="info.complaintDesc">
            <view class="color-attention">备注：</view>
            <view>
                <text class="color-attention">{{ info.complaintDesc }}</text>
            </view>
        </view>
        <!-- 管理员端按钮 -->
        <view class="btns admin" v-if="userinfo.userType === 12 || userinfo.userType === 13">
            <view class="btn bg-primary" v-if="info.status == 3" @tap="complaint">驳回</view>
            <view class="btn bg-primary" v-if="info.status == 5" @tap="complaint">撤销驳回</view>
            <view class="btn back" @tap="back">返回</view>
        </view>
        <!-- 保洁端按钮 -->
        <view class="btns" v-else>
            <view class="left">
                <view v-if="info.status == 2" class="btn open" @tap="open">
                    <view class="iconfont icon-damen"></view>
                    开大门
                </view>
                <view v-if="info.status == 2" class="btn bg-primary" @tap="openDoor">
                    <view class="iconfont icon-fangjian"></view>
                    开房间门
                </view>
            </view>
            <view v-if="info.status == 2" class="btn finish" @tap="finish">完成任务</view>
            <view class="btn back" @tap="back">返回</view>
        </view>
    </view>
</template>

<script>
// pages/taskDetail/taskDetail.js
const app = getApp();
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
export default {
    data() {
        return {
            fileList: [],
            info: {
                status: 0,
                orderNo: '',
                storeName: '',
                roomName: '',
                orderEndTime: '',
                userName: '',
                createTime: '',
                finishTime: '',
                settlementTime: '',
                complaintDesc: ''
            },
            clearId: '',
            userinfo: {
                userType: 0
            },
            complaintDesc: '',
            //驳回原因
            lat: '',
            lon: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getuserinfo();
        this.getLocation();
        if (options.id) {
            this.setData({
                clearId: parseInt(options.id)
            });
            this.getData();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        afterRead(event) {
            let that = this;
            const { file } = event.detail;
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            uni.uploadFile({
                url: app.globalData.baseUrl + '/member/store/uploadImg',
                filePath: file.url,
                name: 'file',
                header: {
                    'tenant-id': app.globalData.tenantId,
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + app.globalData.userDatatoken.accessToken
                },
                success(res) {
                    var data = JSON.parse(res.data);
                    // 上传完成需要更新 fileList
                    var data = JSON.parse(res.data);
                    const { fileList = [] } = that;
                    fileList.push({
                        url: data.data
                    });
                    that.setData({
                        fileList: fileList
                    });
                }
            });
        },

        deleteFun(event) {
            let index = event.detail.index;
            const { fileList = [] } = this;
            fileList.splice(index, 1);
            this.setData({
                fileList
            });
        },

        // 获取用户信息
        getuserinfo: function () {
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/user/get',
                    '1',
                    'get',
                    {},
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('我的信息===');
                        console.info(info);
                        if (info.code == 0) {
                            that.setData({
                                userinfo: info.data
                            });
                        }
                    },
                    function fail(info) {}
                );
            } else {
                //console.log('未登录失败！')
            }
        },

        // 获取详情
        getData: function () {
            let that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/clear/getDetail/' + that.clearId,
                    '1',
                    'get',
                    {
                        clearId: that.clearId
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            var fileList = [];
                            if (info.data.imgs) {
                                info.data.imgs = info.data.imgs.split(',');
                                info.data.imgs.map((it) => {
                                    fileList.push({
                                        url: it
                                    });
                                });
                            }
                            that.setData({
                                info: info.data,
                                fileList: fileList
                            });
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 开大门
        open: function (e) {
            let id = this.info.clearId;
            var that = this;
            console.log('id' + id);
            if (app.globalData.isLogin) {
                http.request(
                    '/member/clear/openStoreDoor/' + id,
                    '1',
                    'post',
                    {
                        id: id
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '开大门成功'
                            });
                            setTimeout(() => {
                                that.getData();
                            }, 1000);
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {
                        uni.showModal({
                            content: info.msg,
                            showCancel: false
                        });
                    }
                );
            }
        },

        // 开房间门
        openDoor: function () {
            let id = this.info.clearId;
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/clear/openRoomDoor/' + id,
                    '1',
                    'post',
                    {
                        id: id
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '开房间门成功'
                            });
                            setTimeout(() => {
                                that.getData();
                            }, 5000);
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 获取定位
        getLocation: function () {
            let that = this;
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    console.info('位置信息===');
                    console.info(res);
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    that.setData({
                        lat: latitude,
                        lon: longitude
                    });
                },
                fail: function (res) {
                    // 如果获取位置信息失败，可以处理错误情况
                    //console.log('获取位置失败', res.errMsg)
                }
            });
        },

        // 完成任务
        finish: function () {
            let id = this.info.clearId;
            var that = this;
            if (!that.fileList.length) {
                uni.showToast({
                    title: '请上传图片',
                    icon: 'error'
                });
                return;
            }
            var urls = [];
            that.fileList.map((it) => {
                urls.push(it.url);
            });
            if (app.globalData.isLogin) {
                http.request(
                    '/member/clear/finish/' + id,
                    '1',
                    'post',
                    {
                        id: id,
                        lat: that.lat,
                        lon: that.lon,
                        imgs: urls.join(',')
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '完成成功'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1000);
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 驳回
        complaint: function () {
            let id = this.info.clearId;
            var that = this;
            var complaint = true;
            if (that.info.status === 3) {
                complaint = true;
                if (!this.complaintDesc) {
                    uni.showToast({
                        title: '请填写驳回原因',
                        icon: 'error'
                    });
                    return;
                }
            } else if (that.info.status === 5) {
                complaint = false;
            }
            if (app.globalData.isLogin) {
                http.request(
                    '/member/manager/complaintClearInfo',
                    '1',
                    'post',
                    {
                        clearId: id,
                        complaint: complaint,
                        complaintDesc: that.complaintDesc
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '操作成功'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1000);
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 返回
        back: function () {
            uni.navigateBack();
        }
    }
};
</script>
<style>
@import './taskDetail.css';
</style>
